<!-- 关键帧组件 -->
<template>
  <div 
    class="keyframe-item"
    :class="{ 'selected': isSelected, 'diamond': type === 'diamond' }"
    :style="{
      left: `${position}px`,
      backgroundColor: color || undefined
    }"
    @mousedown.stop="onMouseDown"
    @click.stop="$emit('select', keyframe)"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <div class="keyframe-tooltip" v-if="showTooltip">
      {{ tooltipContent }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'
import { Keyframe } from '../../types/editor'

// 定义属性
const props = defineProps({
  keyframe: {
    type: Object as () => Keyframe,
    required: true
  },
  position: {
    type: Number,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'circle', // 'circle' 或 'diamond'
    validator: (value: string) => ['circle', 'diamond'].includes(value)
  },
  color: {
    type: String,
    default: ''
  }
})

// 定义事件
const emit = defineEmits(['select', 'dragStart'])

// 显示工具提示
const showTooltip = ref(false)

// 工具提示内容
const tooltipContent = computed(() => {
  const time = props.keyframe.time
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 鼠标悬停显示工具提示
const onMouseEnter = () => {
  showTooltip.value = true
}

// 鼠标离开隐藏工具提示
const onMouseLeave = () => {
  showTooltip.value = false
}

// 鼠标按下开始拖动
const onMouseDown = (event: MouseEvent) => {
  if (event.button !== 0) return // 只处理左键点击
  emit('dragStart', props.keyframe, event)
}

// 监听鼠标事件
defineExpose({
  onMouseEnter,
  onMouseLeave
})
</script>

<style lang="scss" scoped>
.keyframe-item {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  background-color: var(--primary-color);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  will-change: transform;
  
  &:hover {
    transform: scale(1.5);
    z-index: 3;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }
  
  &.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary-color);
    z-index: 4;
  }
  
  &.diamond {
    transform: rotate(45deg);
    border-radius: 0;
    
    &:hover {
      transform: rotate(45deg) scale(1.5);
    }
  }
  
  .keyframe-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    
    &::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -4px;
      border-width: 4px;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
    }
  }
}
</style> 